<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html {
            font-family: sans-serif;
        }
        section {
            width: 70%;
            height: 240px;
            margin: 20px auto;
            background: purple;
            /*该元素为弹性盒子*/
            display: flex;
        }

        div {
            color: white;
            background: orange;
            /*在行中获得相同空间*/
            flex: 5;
            margin-right: 10px;
            text-shadow: 1px 1px 1px black;
        }

        div:last-child {
            margin-right: 0;
        }

        section, div {
            border: 5px solid rgba(0, 0, 0, 0.85);
            padding: 10px;
        }
    </style>
</head>
<body>
<section>
    <div>This is a box</div>
    <div>This is a box</div>
    <div>This is a box</div>
    <div>This is a box</div>
</section>
<button class="create">Create box</button>
<button class="reset">Reset demo</button>

</body>
</html>